<template>
	<view class="container">
		<u-row>
			<u-col span="2">
				<u--text text='手机号:'></u--text>
			</u-col>
			<u-col span="5">
				<u--input
					:autosize='false'
				    placeholder="请输入11位手机号"
				    border="bottom"
				    v-model="value"
				    @change="change"
				  ></u--input>
			</u-col>
			<u-col span="4">
				
			</u-col>
		</u-row>
		<u-row class="u-m-t-10">
			<u-col span="2">
				<u--text text='验证码:'></u--text>
			</u-col>
			<u-col span="9">
				<!-- #ifndef APP-NVUE -->
					<u-input placeholder="获取验证码" 
					 v-model="code"
					 border="bottom">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="获取验证码" 			
						 v-model="code"  border="bottom">
					<!-- #endif -->
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="60"
								 :text="codeTime"
								changeText="xs后获取"
							></u-code>
							<u-button
								@tap="getCode"
								:text="codeTime"
								type="success"
								size="mini"
							></u-button>
						</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				 
			</u-col>
			 
		</u-row>
		<u-row  customStyle="margin-top: 32rpx;">
			<u-col>
				<u-button
					text="确认绑定"
					type="primary"
					shape='circle'
					@click="bindMobile"
				></u-button>
			</u-col>
		</u-row>
 
		<u-row  customStyle="margin: 32rpx 0;">
			<u-col>
				<u-button
					text="暂不绑定,立即体验"
					type="error"
					shape='circle'
					@click="cancel"
				></u-button>
			</u-col>
		</u-row>
		 
		<u--text  customStyle="margin-top: 10rpx;"  text='1.绑定手机号,可通过短信邀请您加入店铺' color='#BC0F0F'></u--text>
		<u--text  customStyle="margin-top: 10rpx;" color='#BC0F0F' text='2.手机号仅用于接收临期通知短信,短信发送时间为早上8点,发送日期为当天,后天,一周,两周,30天有物品临期,也就是一个商品最多有五次提醒;'></u--text>
		 
		
	</view>
	 
		
 
</template>

<script>
	var that
	var UserInfo = require('../../../service/UserInfo.js'),mUserInfo
	export default {
		data() {
			return {
				code:'',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				codeTime: '',
				value: ''
			}
		},
		watch: {
				value(newValue, oldValue) {
					console.log('v-model', newValue);
				}
			},
		onLoad() {
			that = this
			mUserInfo = new UserInfo(this.mNetTool)
		},
		methods: {
			cancel(){
				uni.navigateBack({
					
				})
			},
			bindMobile(){
				let userInfo = uni.getStorageSync('userInfo')
				console.log(this.code) 
				if(this.code.length != 4){
					uni.$u.toast('请输入4位验证码')
					return
				}
				uni.showLoading({
					title:'请稍等'
				}) 
				this.mNetTool.getAjaxUrlValueBackground('capi/loomoSMS/checkCode',{
						mobile:that.value,
						code:that.code
				},res => {
					console.log(res)
					if(res.success){
						console.log('进入更新')
						mUserInfo.update({
							id:userInfo.id,
							mobile:that.value
						},R => {
								// console.log('？？')
								// uni.setStorageSync('userInfo',R.rows)
								uni.hideLoading()
								uni.navigateBack({
									
								})
								uni.$u.toast('绑定成功')
						}) 
					}else {
						uni.$u.toast('验证码错误')
						uni.hideLoading()
					}
				})
			},
			codeChange(text) {
						this.codeTime = text;
						},
			getCode() {
				let userInfo = uni.getStorageSync('userInfo')
				if(userInfo.mobile == that.value){
					uni.$u.toast('无需重复绑定')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					if(!uni.$u.test.mobile(this.value)){
						uni.$u.toast('请输入正确的手机号')
						return
					} 
					mUserInfo.list({
						mobile:this.value
					},res => {
						if(res.rows.records >0){
							console.log('绑定发送')
							uni.showModal({
								content:'该手机号已绑定，账户，是否继续操作？',
								success(r) {
									if(r.confirm){
										this.mNetTool.getAjaxUrlValueBackground('capi/loomoSMS/getCode',{
												mobile:that.value,
												signature:'商品过期管家管家'
										},res => {
											console.log(res)
											if(res.success){
												this.$refs.uCode.start();
												uni.$u.toast('验证码发送成功请，注意查收')
											 
											}else{
												uni.$u.toast('服务器错误！')
											}
										})
									}
								}
							})
						}else {
							console.log('未绑定发送')
							this.mNetTool.getAjaxUrlValueBackground('capi/loomoSMS/getCode',{
									mobile:that.value,
									signature:'商品过期管家'
							},res => {
								console.log(res)
								if(res.success){
									this.$refs.uCode.start();
									uni.$u.toast('验证码发送成功请，注意查收')
									console.log('验证码发送成功请')
								}else{
									uni.$u.toast('服务器错误！')
								}
							})
						}
					})
					// setTimeout(() => {
					
					// 	// 这里此提示会被this.start()方法中的提示覆盖
						
					// 	// uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 32rpx;
	}
</style>
